<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播客收藏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
        }
        .screen {
            width: 393px;
            height: 852px;
            overflow: hidden;
            position: relative;
            border-radius: 40px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            background-color: white;
        }
        .status-bar {
            height: 44px;
            background-color: white;
            position: relative;
            z-index: 10;
        }
        .bottom-nav {
            height: 83px;
            background-color: white;
            border-top: 1px solid #f0f0f0;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 10;
        }
        .screen-content {
            height: calc(100% - 127px);
            overflow-y: auto;
            padding-bottom: 20px;
        }
        .nav-item.active {
            color: #FF4F5B;
        }
        .nav-item {
            color: #9ca3af;
        }
    </style>
</head>
<body class="bg-gray-100 p-6 flex flex-wrap justify-center gap-8">
    <div class="screen">
        <div class="status-bar flex justify-between items-center px-6">
            <span class="text-sm font-medium">9:41</span>
            <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
            </div>
        </div>

        <div class="screen-content">
            <!-- 页面标题 -->
            <div class="px-4 py-2">
                <h1 class="text-2xl font-bold">我的收藏</h1>
            </div>

            <!-- 分类标签 -->
            <div class="px-4 mt-4 overflow-x-auto">
                <div class="flex space-x-3">
                    <button class="px-4 py-2 bg-red-50 text-red-500 rounded-full text-sm font-medium whitespace-nowrap">全部</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">科技</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">商业</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">生活</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">音乐</button>
                </div>
            </div>

            <!-- 收藏的播客列表 -->
            <div class="px-4 mt-6">
                <div class="space-y-4">
                    <!-- 播客项目 -->
                    <div class="flex items-start space-x-3 bg-white p-3 rounded-lg shadow-sm">
                        <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-pink-500 to-red-500 flex-shrink-0"></div>
                        <div class="flex-1">
                            <h3 class="font-medium">科技早知道</h3>
                            <p class="text-sm text-gray-500 mt-1">36氪</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-gray-400">最近更新：2小时前</span>
                            </div>
                        </div>
                        <button class="text-red-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" stroke="none">
                                <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                            </svg>
                        </button>
                    </div>

                    <div class="flex items-start space-x-3 bg-white p-3 rounded-lg shadow-sm">
                        <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-purple-500 to-blue-500 flex-shrink-0"></div>
                        <div class="flex-1">
                            <h3 class="font-medium">声动早咖啡</h3>
                            <p class="text-sm text-gray-500 mt-1">声动活泼</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-gray-400">最近更新：1天前</span>
                            </div>
                        </div>
                        <button class="text-red-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" stroke="none">
                                <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                            </svg>
                        </button>
                    </div>

                    <div class="flex items-start space-x-3 bg-white p-3 rounded-lg shadow-sm">
                        <div class="w-16 h-16 rounded-lg bg-gradient-to-br from-green-500 to-teal-500 flex-shrink-0"></div>
                        <div class="flex-1">
                            <h3 class="font-medium">故事FM</h3>
                            <p class="text-sm text-gray-500 mt-1">故事FM</p>
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="text-xs text-gray-400">最近更新：3天前</span>
                            </div>
                        </div>
                        <button class="text-red-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" stroke="none">
                                <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="bottom-nav flex justify-around items-center">
            <div class="nav-item flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                <span class="text-xs mt-1">发现</span>
            </div>
            <div class="nav-item flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <span class="text-xs mt-1">搜索</span>
            </div>
            <div class="nav-item active flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
                <span class="text-xs mt-1">收藏</span>
            </div>
            <div class="nav-item flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span class="text-xs mt-1">我的</span>
            </div>
        </div>
    </div>
</body>
</html>